import { createUseStyles } from "react-jss";

type StyleProps = { fontSize: number };

const useStyles = createUseStyles({
  switch: {
    fontSize: (props: StyleProps) => props.fontSize - 3,
    position: "relative",
    boxSizing: "border-box",
    padding: 0,
    borderRadius: "20px 20px",
    border: "1px solid #ccc",
    backgroundColor: "#ccc",
    cursor: "pointer",
    minWidth: "28px",
    height: "16px",
    lineHeight: "14px",
    display: "inline-block",
    color: "#fff",
    textAlign: "left",
    paddingRight: "15px",
    paddingLeft: "4px",
  },
  handler: {
    position: "absolute",
    top: "1px",
    borderRadius: "50% 50%",
    background: "#fff",
    cursor: "pointer",
    boxShadow: "0 2px 5px rgb(0 0 0 / 26%)",
    transition: "all .2s ease-in-out",
    width: "12px",
    height: "12px",
  },
  left: {
    left: "calc(0% + 1px)",
  },
  right: {
    left: "calc(100% - 13px)",
  },
  open: {
    border: "1px solid #037aff",
    backgroundColor: "#037aff",
    textAlign: "right",
    paddingRight: "4px",
    paddingLeft: "15px",
  },
  disabled: {
    opacity: "0.4",
    cursor: "not-allowed",
  },
  notAllowed: {
    cursor: "not-allowed",
  },
  loading: {
    display: "flex",
    alignItems: "center",
    width: "100%",
    height: "100%",
    justifyContent: "center",
    cursor: "not-allowed",
    color: "black",
    animation: "switch-loading-cycle 1s infinite linear",
  },
});

export { useStyles };
